<template>
  <div ref="main" style="width:100%;height:94%" />
</template>

<script>
export default {
  mounted() {
    var myChart = this.$echarts.init(this.$refs.main)
    myChart.setOption({
      title: {
        show: true,
        text: '教授课程百分比',
        subtext: '近4年的情况'
      },
      tooltip: {
        trigger: 'axis',

        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {
        padding: [
          20, // 上
          10, // 右
          20, // 下
          20 // 左
        ],
        left: '30%'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['2018', '2019', '2020', '2021', '2022']
      },
      series: [
        {
          name: '大学英语',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40)]
        },
        {
          name: '雅思',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40)]
        },
        {
          name: '托福',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40)]
        },
        {
          name: '小学教育',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40)]
        },
        {
          name: '英语口语',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40), Math.floor(Math.random() * 40)]
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
